<template>
  <div class="role">
    <page-search
      :searchConfig="searchConfig"
      @queryClick="handleQueryClick"
      @resetClick="handleResetClick"
    />
    <page-content
      ref="contentRef"
      @editClick="handleEditClick"
      @newClick="handleNewClick"
      :contentConfig="contentConfig"
    />
    <page-modal
      ref="modalRef"
      :otherInfo="otherInfo"
      :modalConfig="modalConfig"
    >
      <template #menuList>
        <el-tree
          ref="treeRef"
          :data="entirMenus"
          show-checkbox
          node-key="id"
          :props="{ children: 'children', label: 'name' }"
          @check="handleElTreeCheck"
        />
      </template>
    </page-modal>
  </div>
</template>

<script setup lang="ts" name="role">
import PageSearch from '@/components/pageSearch/pageSearch.vue'
import PageContent from '@/components/pageContent/pageContent.vue'
import PageModal from '@/components/pageModal/pageModal.vue'
import searchConfig from './config/search.config'
import contentConfig from './config/content.config'
import modalConfig from './config/modal.config'
import usePageContent from '@/hooks/usePageContent'
import usePageModal from '@/hooks/usePageModal'
import useMainStore from '@/store/main/main'
import { storeToRefs } from 'pinia'
import { nextTick, ref } from 'vue'
import type { ElTree } from 'element-plus'
import { mapMenuListToIds } from '@/utils/mapMenus'
const { contentRef, handleQueryClick, handleResetClick } = usePageContent()
const { modalRef, handleEditClick, handleNewClick } = usePageModal(
  newCallBack,
  editCallBack
)
// 获取所有菜单
const mainStore = useMainStore()
const { entirMenus } = storeToRefs(mainStore)
// 额外的请求参数
const otherInfo = ref({})
// 获取el-tree的实例化
const treeRef = ref<InstanceType<typeof ElTree>>()
function handleElTreeCheck(data1: any, data2: any) {
  // 获取点击时的菜单
  const menuList = [...data2.checkedKeys, ...data2.halfCheckedKeys]
  otherInfo.value = { menuList }
  console.log(menuList)
}
// 新建的回显
function newCallBack() {
  nextTick(() => {
    treeRef.value?.setCheckedKeys([])
  })
}
// 编辑的回显
function editCallBack(itemData: any) {
  nextTick(() => {
    const menuIds = mapMenuListToIds(itemData.menuList)
    console.log(treeRef)
    treeRef.value?.setCheckedKeys(menuIds)
  })
}
</script>

<style lang="less" scoped>
.role {
  border-radius: 10px;
  overflow: hidden;
}
</style>
